<template>
	<view
		class="fixed"
		:style="{
			marginTop: styles.marginTop + 'px',
			marginBottom:styles.marginBottom + 'px',
			marginLeft:styles.marginLeft + 'px',
			marginRight:styles.marginRight + 'px'
		}"
	>
		<view class="wrap">
			<swiper v-if="styles.orPic == 2 ? true : false" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in styles.imgUrl"><image style="width: 100%;height: 450upx;" :src="item.img" mode=""></image></swiper-item>
			</swiper>
			<!-- 定位样式 -->
			<view class="Locate" :style="{ background:styles.colorBg }">
				<!-- 样式一 -->
				<view v-if="styles.module == 1" class="Locate_one" :style="{ borderRadius: styles.circle + 'px', color: styles.colorWord}">
					<view>
						<view>xxx,下午好</view>
						<view>
							<u-icon name="map"></u-icon>
							<view>华中科技大学店</view>
							<view>距您7.0km</view>
							<view>更多门店</view>
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
					<!-- 图片 -->
					<view>
						<view>
							<image src="../../static/images/tubiao/pingz.png" mode=""></image>
							<view>点单</view>
						</view>
						<view>
							<image src="../../static/images/tubiao/souso.png" mode=""></image>
							<view>搜索</view>
						</view>
					</view>
				</view>

				<!-- 样式二 -->
				<view v-if="styles.module == 2" class="Locate_two" :style="{ borderRadius: styles.circle + 'px', color: styles.colorWord}">
					<view> 
						<view>
							<u-icon name="map"></u-icon>
							<view>武汉未来城</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<view>距离您208km</view>
					</view>
					<!-- 图片 -->
					<view>
						<view>
							<image src="../../static/images/tubiao/pingz.png" mode=""></image>
							<view>品种</view>
						</view>
						<view>
							<image src="../../static/images/tubiao/souso.png" mode=""></image>
							<view>搜索</view>
						</view>
					</view>
				</view>
				 
				<!-- 样式三 -->
				<view v-if="styles.module == 3" class="Locate_two" :style="{ borderRadius: `${styles.circle + 'px'}`, color: `${styles.colorWord}` }">
					<view style="width:60%">
						<view>
							<u-icon name="map"></u-icon>
							<view>洪山区武珞路( 街道口由 武汉市洪山区未来城店 送出）</view>
							
						</view>
						
					</view>
					<!-- 图片 -->
					<view>
						<view>
							<image src="../../static/images/tubiao/pingz.png" mode=""></image>
							<view>品种</view>
						</view>
						<view>
							<image src="../../static/images/tubiao/souso.png" mode=""></image>
							<view>搜索</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'fixed',
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		};
	},
	methods: {
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		}
	},
	props: ['styles']
};
</script>
<style lang="scss" scoped>
.fixed {
	.wrap {
		position: relative;
	}
	.swiper {
		height: 450upx;
		position: relative;
	}
	.Locate {
		position: absolute;
		top: 0;
		width: 100%;
		opacity: 0.8;
	}
	// 样式一
	.Locate_one {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;
		& > view:nth-child(1) {
			width: 80%;
			& > view:nth-child(1) {
				font-size: 36upx;
				font-weight: bold;
			}
			& > view:nth-child(2) {
				display: flex;
				align-items: center;
				& > view:nth-child(2) {
					margin-right: 10upx;
					font-size: 24upx;
				}
				& > view:nth-child(3) {
					opacity: 0.6;
				}
				& > view:nth-child(4) {
					margin-right: 10upx;
					font-size: 24upx;
				}
			}
		}
		& > view:nth-child(2) {
			display: flex;
			align-items: center;
			justify-content: center;

			& > view {
				text-align: center;
				margin: 0 auto;
				width: 80upx;
				margin-right: 20upx;
			}
			image {
				width: 40upx;
				height: 40upx;
				margin: 0 auto;
			}
		}
	}
	// 样式二
	.Locate_two {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx;
		& > view:nth-child(1) {
			& > view:nth-child(1) {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 36upx;
					font-weight: bold;
				}
			}
			& > view:nth-child(2) {
				margin-left: 35upx;
				font-size: 24upx;
				margin-top: 10upx;
			}
		}
		& > view:nth-child(2) {
			display: flex;
			align-items: center;
			justify-content: center;
		
			& > view {
				text-align: center;
				margin: 0 auto;
				width: 80upx;
				margin-right: 20upx;
			}
			image {
				width: 40upx;
				height: 40upx;
				margin: 0 auto;
			}
		}
		
	}
}
</style>
